<!-- 
title   @string 标题
legend:[
  data  @Arrary 视图示例
]
tooltip @Object 提示框
xAxis:[
  data  @Array  视图x轴
]
yAxis:[
  data  @Array  视图y轴
]
series:[
  {
    type   @string 视图类型 值 柱状图-bar,折线图-line,平画图-type:'line'smooth:true,面-asesStyle:{color:'#f00'},饼状图-pie
    data   @Array  数据源
    name   @string  图名称
  }
]
-->
 
<template>
  <div>
    <!-- id设置为动态的，因为同一页面同时使用同一个id会被认为是一个图表 -->
    <div
      :style="{ height: chartH + 'px', width: chartW + 'px' }"
      :id="chartsId"
    ></div>
  </div>
</template> 
 
<script>
import * as echarts from "echarts";
export default {
  name: "myCharts",
  data() {
    return {
      myEcharts: null,
      cahrtData: null,

      // options:{
      //   title:{
      //     text:"柱状图"
      //   },
      //   legend:{
      //     data:['支出','收入']
      //   },
      //   tooltip:{},
      //   xAxis:{
      //     data:["1月","2月","3月","4月","5月","6月","7月"]
      //   },
      //   yAxis:{},
      //   series:[
      //     {
      //       type:"bar",
      //       data:['20','30','40','50','60','70','80'],
      //       name:'支出'
      //     },
      //     {
      //       type:"bar",
      //       data:['20','30','40','50','60','70','80'],
      //       name:'收入'
      //     }
      //   ]
      // }
    };
  },
  props: {
    options: {
      title: {
        text: "柱状图",
      },
      legend: {
        data: [],
      },
      tooltip: {},
      xAxis: {
        data: [],
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          data: [],
          name: "",
        },
        {
          type: "bar",
          data: [],
          name: "",
        },
      ],
    },
    chartsId: {
      type: String,
      default: "myChart",
    },
    chartW: {
      type: Number,
      default: 600,
    },
    chartH: {
      type: Number,
      default: 400,
    },
  },
  computed: {},
  watch: {
    //options需要深度监听，因为options是一个对象，不深层监听对象内的属性值改变是无法浅监听的
    options: {
      handler(val) {
        //监听到内部属性值发生变化时，更新charts视图
        this.myEcharts.setOption(this.options);
      },
      //开启深度监听
      deep: true,
    },
  },
  methods: {
    //柱状图
    initEchart() {
      //初始化chart视图，动态获取渲染视图的div
      this.myEcharts = echarts.init(
        document.getElementById(`${this.chartsId}`)
      );
      this.myEcharts.setOption(this.options);
    },
  },
  mounted() {
    this.initEchart();
  },
};
</script>